<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教学安排</title>
    <link rel="icon" href="../images/cl-img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css" type="text/css">
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/teaching-plan-lg.css" type="text/css" media="screen and (min-width:1320px) and (max-width:1920px)">
    <link rel="stylesheet" href="../css/teaching-plan-md.css" type="text/css" media="screen and (min-width:768px) and (max-width:1320px)">
    <link rel="stylesheet" href="../css/teaching-plan-xs.css" type="text/css" media="screen and (max-width:768px)">
    <link rel="stylesheet" href="../fonts/font-awesome-4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="../util/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/teaching-plan.js"></script>
    <script type="text/javascript" src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../util/echarts.js"></script>
    <style>
    </style>
</head>
<body>
    <nav>
        <div class="title">教学总览</div>
    </nav>
    <div class="container">
        <div class="container-left fl">
            <div class="section1">
                <div class="course fl">
                    <table id="tableBox">
                        <tr>
                            <th colspan="5">今日课程安排</th>
                        </tr>
                        <tr>
                            <td>课程名称</td>
                            <td>课程教室</td>
                            <td>课程班级</td>
                            <td>课程时间</td>
                            <td>修改</td>
                        </tr>
                        <tr>
                            <td class="name"></td>
                            <td class="room"></td>
                            <td class="grade"></td>
                            <td class="time"></td>
                            <td>
                                <i class="fa fa-pencil change" aria-hidden="true"></i>
                                <i class="fa fa-floppy-o save"></i>
                            </td>
                        </tr>
                        <tr>
                            <td class="name"></td>
                            <td class="room"></td>
                            <td class="grade"></td>
                            <td class="time"></td>
                            <td>
                                <i class="fa fa-pencil change"></i>
                                <i class="fa fa-floppy-o save"></i>
                            </td>
                        </tr>
                        <tr>
                            <td class="name"></td>
                            <td class="room"></td>
                            <td class="grade"></td>
                            <td class="time"></td>
                            <td>
                                <i class="fa fa-pencil change"></i>
                                <i class="fa fa-floppy-o save"></i>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="chart1 fl">
                    <div style="width: 300px;height: 240px;margin: auto" id="main">

                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="section2">
                <div class="work-plan fl">
                    <div class="work-title" id="time"></div>
                    <div class="work-icon">
                        <i class="fa fa-calendar icon"></i>
                        <i class="fa fa-envelope-o icon"></i>
                    </div>
                    <div class="work-content">
                        <div>工作计划安排</div>
                        <div class="work-details"><p>1、<span>周一</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>举行朝会升旗，为孩子提供铅笔，纸张，剪刀等工具，带领孩子进行手工制作，加强动手能力，注意保护孩子安全。</span></p><p class="look-more">查看详情</p></div>
                        <div class="clearFix"></div>
                        <div class="work-details"><p>2、<span>周二</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>分享每日故事，教育孩子养成早睡早起，按时到校的好习惯，让孩子学习写自己的名字。</span></p><p class="look-more">查看详情</p></div>
                        <div class="clearFix"></div>
                        <div class="work-details"><p>3、<span>周三</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>进行室外活动，培养孩子团队合作，分享能力，让孩子养成学会谦让，协商等，加强交流能力。</span></p><p class="look-more">查看详情</p></div>
                        <div class="clearFix"></div>
                        <div class="work-details"><p>4、<span>周四</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>带领学生歌唱，进行音乐舞蹈欣赏，并且对班级歌曲练习，挖掘孩子艺术天赋。</span></p><p class="look-more">查看详情</p></div>
                        <div class="clearFix"></div>
                        <div class="work-details"><p>5、<span>周五</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>进行卫生扫除，做好教室玩具收捡，做好学生接送工作。</span></p><p class="look-more">查看详情</p></div>
                    </div>
                </div>
                <div class="notice fl">
                    <div class="notice-title"><i class="fa fa-bullhorn"></i> &nbsp;<span id="notice-type"></span></div>
                    <div class="notice-content"><span id="notice-title"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="notice-content"></span></div>
                    <div class="notice-btn">
                        <span id="notice-dep"></span>&nbsp;
                        <span id="notice-date"></span>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="container-right fl">
            <div class="section3">
                <div class="student-work fl">
                    <p class="student-work-title">学生出勤</p>
                    <div class="percent">
                        <div class="percent-watch progress">
                            <div class="progress-bar" style="width: 96%">
                                96%<span class="sr-only"></span>
                            </div>
                        </div>
                    </div>
                    <div class="sign-out fl">11<br/>未出勤</div>
                    <div class="sign-in fl">220<br>已出勤</div>
                </div>
                <div class="student-sign fl">
                    <p class="student-work-title">教师出勤</p>
                    <div class="percent">
                        <div class="percent-watch progress">
                            <div class="progress-bar" style="width: 93%;background: #31BC86">
                                93%<span class="sr-only"></span>
                            </div>
                        </div>
                    </div>
                    <div class="sign">
                        <div class="sign-out fl">3<br/>未出勤</div>
                        <div class="sign-in fl">40<br>已出勤</div>
                        <div class="clearFix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="section4">
                <div class="memo-title">备忘录</div>
                <div class="change-icon"><i class="fa fa-pencil-square-o"></i></div>
                <div class="change-icon1"><i class="fa fa-floppy-o"></i></div>
                <p class="memo-content">

                </p>
            </div>
            <div class="section5">
                <div class="new-student">
                    <div class="instant-student fl">
                        <div class="fl">
                            <p class="message-title">本月新生</p>
                            <p class="message-num">28</p>
                        </div>
                        <div class="fl message-icon">
                            <i class="fa fa-users" aria-hidden="true"></i>
                        </div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="growth-rate fl">
                        <div class="fl">
                            <p class="message-title">增长率 (%)</p>
                            <p class="message-num">1.25%</p>
                        </div>
                        <div class="fl message-icon" style="background: #ED7447">
                            <i class="fa fa-line-chart" aria-hidden="true"></i>
                        </div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="salary">
                    <div class="payroll fl">
                        <div class="fl">
                            <p class="message-title1">工资条</p>
                        </div>
                        <div class="fl message-icon" style="background: #3AB5F1">
                            <i class="fa fa-credit-card" aria-hidden="true"></i>
                        </div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="school-rule fl">
                        <div class="fl">
                            <p class="message-title1">学校规章</p>
                        </div>
                        <div class="message-icon fl" style="background: #F7CB14">
                            <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        </div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <p id="hint-content"></p>
                    <table id="salary">
                        <tr>
                            <th colspan="2">应发工资</th>
                            <th colspan="4">增加工资</th>
                            <th colspan="3">扣除工资</th>
                            <th rowspan="2">实发工资</th>
                        </tr>
                        <tr>
                            <td>基本工资</td>
                            <td>工龄工资</td>
                            <td>全勤奖励</td>
                            <td>电话补贴</td>
                            <td>加班补贴</td>
                            <td>其他补贴</td>
                            <td>迟到早退</td>
                            <td>请假</td>
                            <td>其他</td>
                        </tr>
                        <tr>
                            <td>8000</td>
                            <td>2000</td>
                            <td>500</td>
                            <td>200</td>
                            <td>500</td>
                            <td>500</td>
                            <td>200</td>
                            <td>50</td>
                            <td>0</td>
                            <td>11450</td>
                        </tr>
                    </table>
                    <p id="ruler-content">
                        一、环境卫生<br>
                        1.建立健全室内外环境清扫制度，每天一小扫，每周一大扫，分片包干，定人、定期检查。 <br>
                        2.幼儿玩教具要保持清洁，定期要消毒、清洗。<br>
                        3.经常保持室内空气流通、阳光充足，定时开窗通风换气，室内有防蚊蝇、防暑设备。<br>
                        4.厕所清洁通风，定时打扫并消毒。<br><br>
                        二、个人卫生<br>
                        1.幼儿饭前便后要洗手，用流动水或干净水洗手和洗脸，经常保持清洁。<br>
                        2.饭后漱口，教育幼儿养成早晚刷牙的习惯。<br>
                        3.要求幼儿每周剪指甲1次，每天带干净的小手绢。<br>
                        4.要求幼儿服装整洁，被褥勤晒，床单每月洗1次。<br>
                        5.保护视力，室内要注意采光，损坏灯具等要及时修理，看电视时间不宜过长，不能离得太近，高度要适中。<br><br>
                        三、消毒隔离制度<br>
                        1.有专用保健室、观察床，保健宝用品专用。<br>
                        2.幼儿及工作人员患传染病立即隔离治疗，所在班彻底消毒，患者待隔离期满 痊愈后，经医生证明方可回园。3.对患儿专人护理，仔细观察，按时服药和喂饭。
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: '上月出勤情况',
            x: 'center',
            y: 'top',
            left: '40%',
            top: '5%',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            top: '2%',
            left: '2%',
            data:['请假率','迟到率','出勤率'],
        },
        color:['#F74749','#FEB55F','#47BFBE'],
        series: [
            {
                name:'信息源',
                type:'pie',
                radius: ['50%', '70%'],
                center:['60%','58%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        color: 'black',
                        formatter: '{b} : ({d}%)',
                    },
                    labelLine :{show:true},
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:0.1, name:'请假率'},
                    {value:0.05, name:'迟到率'},
                    {value:0.85, name:'出勤率'},
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>
</html>